<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <base href="${pageContext.request.contextPath}/"/>
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="view/bootstrap-3.3.5/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="view/bootstrapvalidator/css/bootstrapValidator.css"/>
    <script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
    <script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script charset="utf-8" src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑报销申请单</h4>
    </div>

    <div class="panel-body">
        <form action="apply/editBxInformal" enctype="multipart/form-data"
              id="myform" method="post" class="form-horizontal" role="form">
            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="docNo" class="col-md-4 control-label">申请单号</label>
                    <div class="col-md-8">
                        <input type="hidden" id="oid" name="oid" value="${bx.oid}">
                        <input type="hidden" name="createDate" value="${bx.createDate}">
                        <input type="text" id="docNo" name="docNo" readonly="readonly"
                               class="form-control" placeholder="提交后自动生成" value="${bx.docNo}">
                    </div>
                </div>

                <div class="form-group col-md-6">
                    <label for="proposer" class="col-md-4 control-label">申请人</label>
                    <div class="col-md-8">
                        <input type="hidden" id="proposer" name="proposer" value="${bx.proposer}">
                        <div class="input-group">
                            <input type="text" id="empName" name="empName"
                                   readonly="readonly" class="form-control" placeholder="请选择申请人"
                                   value="${bx.empproposer.empName}">
                            <span class="input-group-btn">
									<button class="btn btn-info" type="button" data-toggle="modal"
                                            data-target="#selectempModal">请选择</button>
								</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-6">
                    <label for="flowid" class="col-md-4 control-label">报销审批流程</label>
                    <div class="col-md-8">
                        <select name="flowid" class="form-control" id="flowid">
                            <option value="">--请选择--</option>
                            <c:forEach items="${lcFlows}" var="l">
                                <option value="${l.oid }"
                                    ${l.oid==bx.flowid?"selected":"" }>${l.flowName }
                                </option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <label for="reason" class="col-md-2 control-label">申请事由</label>
                    <div class="col-md-10">
							<textarea class="form-control" id="reason" name="reason" rows="5"
                                      placeholder="请输入申请事由"></textarea>
                        <input type="hidden" id="contentTemp" name="contentTemp"
                               value="${bx.reason}">
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <hr>
                </div>
            </div>

            <div id="details">
                <c:forEach items="${bx.maldetails }" var="m">
                    <div>
                        <div class="col-md-12" style="display: none;" id="detailsTitle">
                            <div align="center">
                                <h4><label class="text-primary">报销明细</label></h4><BR> <BR>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group col-md-5">
                                <label for="typeid" class="col-md-4 control-label">报销类型</label>
                                <div class="col-md-8">
                                    <input type="hidden" name="detailoid" value="${m.oid}">
                                    <input type="hidden" name="tid" value="${m.parentid}">
                                    <select name="typeid" class="form-control" id="typeid">
                                        <option value="">--请选择--</option>
                                        <c:forEach items="${bxtype}" var="b">
                                            <option value="${b.oid }"
                                                ${b.oid==m.typeid?"selected":"" }>${b.name }</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-5">
                                <label for="applyAmount" class="col-md-4 control-label">申报金额</label>
                                <div class="col-md-8">
                                    <input type="text" name="applyAmount" id="applyAmount" class="form-control"
                                           placeholder="请输入申报金额" value="${m.applyAmount}">
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group col-md-12">
                                <hr>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>

            <div id="accessarys">
                <c:forEach items="${bx.malaccessary}" var="m">
                    <div>
                        <div class="col-md-12" style="display: none;" id="accessarysTitle">
                            <div align="center">
                                <h4><label class="text-primary">报销附件</label></h4><BR><BR>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group col-md-5">
                                <label for="content" class="col-md-4 control-label">附件(最大20M)</label>
                                <div class="col-md-8">
                                    <input type="hidden" name="accessaryoid" value="${m.oid}">
                                    <input type="hidden" name="parentid" value="${m.parentid}">
                                    <input type="hidden" name="contentfile" value="${m.content}">
                                    已上传文件:<A href="apply/downloadBxFile?oid=${m.oid}">${m.content}</A>
                                </div>
                            </div>
                            <div class="form-group col-md-5">
                                <label for="description" class="col-md-4 control-label">附件描述</label>
                                <div class="col-md-8">
                                    <input type="text" name="description" id="description"  class="form-control"
                                           placeholder="请输入附件描述" value="${m.description}">
                                </div>
                            </div>
                            <div class="form-group col-md-2">
                                <input type="button" onclick="deteleAccessarys(this)" class="btn btn-danger"
                                       value="删除此附件">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group col-md-12">
                                <hr>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>

            <div class="col-md-12">
                <div class="form-group col-md-12">
                    <div class="col-md-10  col-md-offset-2">
                        <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
                        <button type="button" id="addDetails" class="btn btn-success">添加报销明细</button>
                        <button type="button" id="addAccessarys" class="btn btn-success">添加报销附件</button>
                        <button type="button" id="editdeptbtn" class="btn btn-success">提交信息</button>
                        <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 报销明细模板 -->
<div id="detailsdemo" style="display: none;">
    <div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="typeid" class="col-md-4 control-label">报销类型</label>
                <div class="col-md-8">
                    <select name="typeid" class="form-control" id="typeid">
                        <option value="">--请选择--</option>
                        <c:forEach items="${bxtype}" var="b">
                            <option value="${b.oid }">${b.name }</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="applyAmount" class="col-md-4 control-label">申报金额</label>
                <div class="col-md-8">
                    <input type="text" name="applyAmount" id="applyAmount" class="form-control"
                           placeholder="请输入申报金额">
                </div>
            </div>
            <div class="form-group col-md-2">
                <input type="button" onclick="deteleDetails(this)" class="btn btn-danger" value="删除此明细">
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group col-md-12">
                <hr>
            </div>
        </div>
    </div>
</div>

<!-- 报销附件模板 -->
<div id="accessarysdemo" style="display: none;">
    <div>
        <div class="col-md-12">
            <div class="form-group col-md-5">
                <label for="content" class="col-md-4 control-label">附件(最大20M)</label>
                <div class="col-md-8">
                    <input type="file" id="content" name="content">
                </div>
            </div>
            <div class="form-group col-md-5">
                <label for="dname" class="col-md-4 control-label">附件描述</label>
                <div class="col-md-8">
                    <input type="text" name="dname" id="dname" class="form-control"
                           placeholder="请输入附件描述">
                </div>
            </div>
            <div class="form-group col-md-2">
                <input type="button" onclick="deteleAccessarys(this)" class="btn btn-danger" value="删除此附件">
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group col-md-12">
                <hr>
            </div>
        </div>
    </div>
</div>
<%@include file="../modal/selectemp.jsp" %>
<%@include file="../modal/confirm.jsp" %>
<script type="text/javascript">
    $(document).ajaxError(function (event, xhr) {
        if (xhr.status == "403") {//没有权限
            document.location.href = xhr.getResponseHeader("url");
        } else if (xhr.status != "200") {
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>

<script type="text/javascript">
    function setempvalue(eid, empName) {
        $("#proposer").val(eid);
        $("#empName").val(empName);
    }
</script>
</body>


<script type="text/javascript">
    function deteleDetails(o) {
        $(o).parent().parent().parent().remove();
        if ($("#details").children().length == 1) {
            $("#detailsTitle").hide();
        }
    }

    function deteleAccessarys(o) {
        $(o).parent().parent().parent().remove();
        if ($("#accessarys").children().length == 1) {
            $("#accessarysTitle").hide();
        }
    }

    $(document).ready(function () {

        $("#addDetails").click(function () {
            $("#detailsTitle").show();
            $("#details").append($("#detailsdemo").html());
            $('#myform').bootstrapValidator('addField', 'typeid', {
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '报销类型不能为空!'
                    }

                }
            });
            $('#myform').bootstrapValidator('addField', 'applyAmount', {
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '报销金额不能为空!'
                    },
                    regexp: {
                        regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                        message: '报销金额格式不正确,金额必须大于0!'
                    }
                }
            });
        });

        $("#addAccessarys").click(function () {
            $("#accessarysTitle").show();
            $("#accessarys").append($("#accessarysdemo").html());

            $('#myform').bootstrapValidator('addField', 'content', {
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '报销附件不能为空!'
                    }
                }
            });

            $('#myform').bootstrapValidator('addField', 'description', {
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '附件描述不能为空!'
                    }
                }
            });
        });

        $("#myform").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {/*input状态样式图片*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                flowid: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '请选择报销流程!'
                        }
                    }
                },
                empName: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '申请人不能为空!'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '附件描述不能为空!'
                        }
                    }
                },
                content: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '报销附件不能为空!'
                        }
                    }
                },
                applyAmount: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '报销金额不能为空!'
                        },
                        regexp: {
                            regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
                            message: '报销金额格式不正确,金额必须大于0!'
                        }
                    }
                },
                typeid: {
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '报销类型不能为空!'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
                validator.defaultSubmit();
            }
        });


        $("#resetbtn").click(function () {
            $("#myform").data("bootstrapValidator").resetForm();
        });

        $("#editdeptbtn").click(function () {
            $('#myform').data("bootstrapValidator").validate();
            if ($('#myform').data("bootstrapValidator").isValid()) {
                var typeids = new Array();
                var s = true;
                $("select[name='typeid']").each(function () {
                    if ($.inArray($(this).val(), typeids) != -1) {
                        $("#alertmsg").text("报销明细中报销类型不能重复!");
                        $('#alertMsgModal').modal('show');
                        s = false;
                        return;
                    }
                    typeids.push($(this).val());
                });
                if (s == true) {
                    $('#myform')[0].submit();
                }
            }
        });
    });

    $().ready(function () {
        init();
    });

    function init() {
        var reason = document.getElementById("reason");
        reason.value = document.getElementById("contentTemp").value;
    }
</script>
</html>